<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="Content-Type" content=
        "text/html; charset=iso-8859-1">
<script type="text/javascript" src="../externals/jquery/src/jquery/jquery.js"></script>
<script type="text/javascript" src="../externals/jquery/src/selector/selector.js"></script>
<script type="text/javascript" src="../externals/jquery/src/ajax/ajax.js"></script>
<script type="text/javascript" src="../externals/jquery/src/event/event.js"></script>
<script type="text/javascript" src="../externals/jquery/src/fx/fx.js"></script>
<script type="text/javascript" src="../externals/plugins/interface/iutil.js"></script>
<script type="text/javascript" src="../externals/plugins/interface/idrag.js"></script>
<script type="text/javascript" src="../externals/plugins/interface/idrop.js"></script>
<script type="text/javascript" src="../externals/plugins/interface/isortables.js"></script>
<script type="text/javascript" src="../src/inestedsortable.js"></script>
		
		<style type="text/css">
			div.wrap {
				border:1px solid #BBBBBB;
				padding: 1em 1em 1em 1em;
			}
			
			.page-list {
				list-style: none;
				margin: 0;
				padding: 0;
				display: block;
			}
			
			.clear-element {
				clear: both;
			}
			
			.page-item1 > div,
			.page-item2 > div,
			.page-item3 > div,
			.page-item4 > div {
				background: #f8f8f8;
				margin: 0.25em 0 0 0;
			}

			.left {
				text-align: left;
			}
			
			.right {
				text-align: right;
			}

			.sort-handle {
				cursor:move;
			}
			
			.helper {
			border:2px dashed #777777;
			}
			
			.current-nesting {
				background-color: yellow;
			}
			
			.bold {
				color: red;
				font-weight: bold;
			}
			
		</style>
		


        <title>Nested Sortables Demo</title>
    </head>

    <body>

        <h3>Left to Right nesting showing serialization.</h3>

<pre>
//Code:
	$('#left-to-right').NestedSortable(
		{
			accept: 'page-item1',
			opacity: .8,
			helperclass: 'helper',
			onChange: function(serialized) {
				$('#left-to-right-ser')
				.html("This can be passed as parameter to a GET request: <br/>" 
						+ serialized[0].hash);
			}
		}
	);
</pre>

        <div class="wrap">
            <ul id="left-to-right" class="page-list">
                <li id="ele1" class="clear-element page-item1 sort-handle left">
                    <div>Element 1</div>
                </li>
                <li id="ele2" class="clear-element page-item1 sort-handle left">
                    <div>Element 2</div>
                </li>
                <li id="ele3" class="clear-element page-item1 sort-handle left">
                    <div>Element 3</div>
                </li>
                 <li id="ele4" class="clear-element page-item1 sort-handle left">
                    <div>Element 4</div>
					<ul class="page-list">
		                <li id="ele5" class="clear-element page-item1 sort-handle left">
		                 	<div>Element 5</div>
							<ul  class="page-list" >
				                <li id="ele6" class="clear-element page-item1 sort-handle left">
	                            	<div>Element 6</div>
				                </li>
							</ul>
						</li>
					</ul>
                </li>
            </ul>
        </div>
		<br/>
		<div id='left-to-right-ser' class="wrap">
			Change the order of the above NestedSortable and the serialized output will be shown here.
		</div>
		
        <h3>Right to Left nesting.</h3>

<pre>
//Code:
	$('#right-to-left').NestedSortable(
		{
		accept: 'page-item2',
		opacity: .8,
		helperclass: 'helper',
		rightToLeft: true,
		nestingPxSpace: '60', 
		currentNestingClass: 'current-nesting'
		}
	);
</pre>

        <div class="wrap">
            <ul id="right-to-left" class="page-list">
                <li class="clear-element page-item2 sort-handle right">
                    <div>Element 1</div>
                </li>
                <li class="clear-element page-item2 sort-handle right">
                    <div>Element 2</div>
                </li>
                <li class="clear-element page-item2 sort-handle right">
                    <div>Element 3</div>
                </li>
                 <li class="clear-element page-item2 sort-handle right">
                    <div>Element 4</div>
					<ul class="page-list">
		                <li class="clear-element page-item2 sort-handle right">
		                 	<div>Element 5</div>
		           
							<ul  class="page-list" >
				                <li class="clear-element page-item2 sort-handle right">
	                            	<div>Element 6</div>
				                </li>
							</ul>
						</li>
					</ul>
                </li>
            </ul>
        </div>
		
        <h3>Spans and Divs</h3>

<pre>
//Code:
	$('#spans-divs').NestedSortable(
		{
		accept: 'page-item3',
		opacity: .8,
		helperclass: 'helper',
		nestingPxSpace: 20,
		currentNestingClass: 'current-nesting',
		}
	);
</pre>
		
        <div class="wrap">
            <span id="spans-divs" class="page-list">
                <div class="clear-element page-item3 sort-handle left">
                    <div>Element 1</div>
                </div>
                <div class="clear-element page-item3 sort-handle left">
                    <div>Element 2</div>
                </div>
                <div class="clear-element page-item3 sort-handle left">
                    <div>Element 3</div>
                </div>
                <div class="clear-element page-item3 sort-handle left">
                    <div>Element 4</div>
					<span class="page-list">
		                <div class="clear-element page-item3 sort-handle left">
		                    <div>Element 5</div>
							<span class="page-list">
				                <div class="clear-element page-item3 sort-handle left">
				                    <div>Element 6</div>
				                </div>
							</span>
						</div>
					</span>
                </div>
            </span>
        </div>
		
        <h3>Regular Sortable</h3>

<pre>
//Code:
	$('#spans-divs-regular').Sortable(
		{
		accept: 'page-item4',
		opacity: .8,
		helperclass: 'helper'
		}
	);
</pre>
		
        <div class="wrap">
            <span id="spans-divs-regular" class="page-list">
                <div class="clear-element page-item4 sort-handle left">
                    <div>Element 1</div>
                </div>
                <div class="clear-element page-item4 sort-handle left">
                    <div>Element 2</div>
                </div>
                <div class="clear-element page-item4 sort-handle left">
                    <div>Element 3</div>
                </div>
                <div class="clear-element page-item4 sort-handle left">
                	<div>Element 4</div>
				</div>
                <div class="clear-element page-item4 sort-handle left">
                    <div>Element 5</div>
                </div>
                <div class="clear-element page-item4 sort-handle left">
                    <div>Element 6</div>
                </div>
            </span>
        </div>
		
		<script type="text/javascript">
			jQuery( function($) {
			
				$('#left-to-right').NestedSortable(
					{
						accept: 'page-item1',
						opacity: .8,
						helperclass: 'helper',
						onChange: function(serialized) {
							$('#left-to-right-ser').html("This can be passed as parameter to a GET request: <br/>" + serialized[0].hash);
						}
					}
				);
				
				$('#right-to-left').NestedSortable(
					{
					accept: 'page-item2',
					opacity: .8,
					helperclass: 'helper',
					rightToLeft: true,
					nestingPxSpace: '60', 
					currentNestingClass: 'current-nesting'
					}
				);
				
				$('#spans-divs').NestedSortable(
					{
					accept: 'page-item3',
					opacity: .8,
					helperclass: 'helper',
					nestingPxSpace: 20,
					currentNestingClass: 'current-nesting',
					}
				);
				
				$('#spans-divs-regular').Sortable(
					{
					accept: 'page-item4',
					opacity: .8,
					helperclass: 'helper'
					}
				);
					
			});
		</script>
		
    </body>
</html>

